import React from "react"
import { Space, Button, notification, Input, } from 'antd'
import { UpCircleOutlined, FileAddOutlined, CloseCircleFilled } from '@ant-design/icons'
import { Image } from 'antd'
import { backgroundObj } from '@/utils/utils'
import aliOssUpload from "@/utils/aliOssUpload";
import './index.less'

const TextArea = (porps) => {
    const { value, onChange, onOk, loading = false, disabled, imageList = [], setImageList } = porps
    const openImagePicker = async () => {
        try {
            const fileHandle = await window.showOpenFilePicker({
                multiple: true, // 设置为 false 表示只能选择一个文件
                types: [
                    {
                        accept: {
                            'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.tiff', '.svg'],
                            'application/pdf': ['.pdf'],
                            'application/msword': ['.doc'],
                            'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
                            'text/plain': ['.txt'],
                            'application/vnd.ms-powerpoint': ['.ppt'],
                            'application/vnd.openxmlformats-officedocument.presentationml.presentation': ['.pptx'],
                            'application/vnd.ms-excel': ['.xls'],
                            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx']
                        }
                    },

                ]
            });
            const fileList = await Promise.all(fileHandle.map(async val => {
                const file = await val.getFile();
                return file
            }))
            const img = await aliOssUpload(fileList)
            setImageList((e) => ([...e, ...img]))
        } catch (error) {
            console.error(error);
        }
    }
    function isImageFile(path) {
        // 提取文件扩展名（不区分大小写）
        const extension = path.split('.').pop().toLowerCase();

        // 常见图片扩展名列表
        const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];

        return imageExtensions.includes(extension);
    }
    return <div className='AnsweringAi_textArea_box'>
        <div className='AnsweringAi_textArea_imageList'>
            {imageList.map(item => {
                if (!isImageFile(item)) {
                    return <div onClick={() => { window.open(item) }} className="AnsweringAi_file font_hide">
                        {item}
                        <CloseCircleFilled onClick={(e) => {
                            e.stopPropagation()
                            setImageList(e => {
                                return e.filter(val => { return val !== item })
                            })
                        }} className="AnsweringAi_textArea_close"></CloseCircleFilled>
                    </div>
                }
                return <div style={backgroundObj(item)} className="AnsweringAi_textArea_image">
                    <CloseCircleFilled onClick={() => {
                        setImageList(e => {
                            return e.filter(val => { return val !== item })
                        })
                    }} className="AnsweringAi_textArea_close"></CloseCircleFilled>
                </div>
            })}
        </div>
        <div className='AnsweringAi_textArea_data'>
            <div className='AnsweringAi_textArea_item'>
                <div className='AnsweringAi_textArea'>
                    <textarea onKeyDown={(event) => {
                        if (event.key === 'Enter') {
                            // 阻止默认的回车换行行为
                            event.preventDefault();
                            // 在这里处理你的逻辑，例如添加新行或者提交表单
                            !loading && onOk()
                        }
                    }} style={{ border: 'none', outline: 'none' }} onInput={onChange} value={value} placeholder='给 ai助手 发送消息 ' className='AnsweringAi_textArea_liner1'></textarea>
                    <div className='AnsweringAi_textArea_liner2'></div>
                </div>
                <div className='AnsweringAi_btn'>
                    <Space style={{ marginLeft: 'auto' }} align="end">
                        <Button onClick={() => {
                            openImagePicker()
                        }
                        } icon={<FileAddOutlined></FileAddOutlined>}></Button>
                        <Button loading={loading} onClick={() => {

                            onOk()
                        }} disabled={!value || disabled} icon={<UpCircleOutlined></UpCircleOutlined>} type='primary'></Button>
                        {/* <div className='AnsweringAi_btn_style1'>深度思考</div>
                        <div className='AnsweringAi_btn_style2'>联网搜索</div> */}
                    </Space>
                </div>
            </div>
        </div>
    </div>
}
export default TextArea